v-model 是 Vue.js 提供的一個指令，可以實現表單元素和 Vue 實例中的資料之間的雙向綁定。它是 Vue.js 中常用的一個功能，可以簡化表單處理和資料同步的過程。
將表單元素（如 <input>、<textarea>、<select>）和 Vue 實例中的資料綁定在一起。當使用者在表單元素中輸入數據時，這個數據會自動更新到 Vue 實例中的資料。
Html:

<div id="app">
  <input v-model="message" type="text">
  <p>輸入的內容是: {{ message }}</p>
</div>

Js:

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

呈現畫面:

在範例中，v-model="message" 將 元素和 Vue 實例中的 message 資料綁定在一起。當使用者在輸入框中輸入文字時，message 的值會自動更新，或者改變 message 的值，輸入框中的內容也會自動更新。

以下是各類表單元件的雙向綁定例子:

1. 多行文字(textarea):
   綁定預設值建議為字串(string)
   範例如下:
   Html檔:

<div id="app">
  <textarea v-model="message"></textarea>
  <p>輸入的內容是: {{ message }}</p>
</div>

js檔:

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

2. 方塊(checkbox):
   範例如下:
   Html檔:

<div id="app">
  <input type="checkbox" v-model="checkbox1">
  <label for="checkbox1">方塊 1</label><br>
  
  <input type="checkbox" v-model="checkbox2">
  <label for="checkbox2">方塊 2</label><br>
  
  <input type="checkbox" v-model="checkbox3">
  <label for="checkbox3">方塊 3</label><br>
  
  <p>方塊 1 狀態: {{ checkbox1 }}</p>
  <p>方塊 2 狀態: {{ checkbox2 }}</p>
  <p>方塊 3 狀態: {{ checkbox3 }}</p>
</div>

js檔:

var app = new Vue({
  el: '#app',
  data: {
    checkbox1: false,
    checkbox2: false,
    checkbox3: false
  }
})

在 data 中定義了三個布林值資料：checkbox1、checkbox2 和 checkbox3。然後我們在 HTML 中使用了三個 checkbox 輸入框，並分別使用 v-model 將它們和相對應的資料綁定在一起。
如果選中或取消選中這些 checkbox 時，相應的資料值（checkbox1、checkbox2、checkbox3）會即時更新。
同時元素中的文本也會即時反映出 checkbox 的狀態。

呈現畫面:

3. 單選選單(select):
範例如下
Html檔:

<div id="app">
  <select v-model="selectedOption">
    <option value="蘋果">蘋果</option>
    <option value="草莓">草莓</option>
    <option value="香蕉">香蕉</option>
  </select>
  <p>選擇的選項是: {{ selectedOption }}</p>
</div>

js檔:

var app = new Vue({
  el: '#app',
  data: {
    selectedOption: ' '
  }
})

設定selectedOption 的資料，它代表了選擇的選項的值。
然後在 HTML 中使用了一個 select 元素，並使用 v-model="selectedOption" 將它和 selectedOption 資料綁定在一起。
在 select 元素中，我們定義了三個 option 選項，每個選項都有一個對應的值（value）。
所以在選單中選擇不同的選項時，selectedOption 的值會即時更新。

呈現畫面: